<script setup lang='ts'>
import { useInfo } from '@fl/api/fangjiaohui'
import { ElButton, ElCard, ElRow, ElSkeleton } from 'element-plus'

import { CUSTOMER_DICT } from './constant'

const { push } = useRouter()
const route = useRoute()
const { data, isLoading } = useInfo({ id: route.query.id ?? '' })
</script>

<template>
    <ElSkeleton v-if="isLoading"
                :rows="5"
    />

    <ElCard v-else>
        <ElButton @click="push('/house-source-center/fair/reservation-information-list')">
            返回列表
        </ElButton>

        <div class="p-20">
            <div class="font-600 text-#1D2129 text-20">
                客户名称
            </div>

            <div class="p-30 pl-60">
                <ElRow :gutter="20">
                    <el-col :span="8">
                        <div>客户名称：{{ data?.customerName }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>
                            客户状态：
                            <el-tag :type="CUSTOMER_DICT[data?.customerStatus]?.type">
                                {{ CUSTOMER_DICT[data?.customerStatus]?.value }}
                            </el-tag>
                        </div>
                    </el-col>
                </ElRow>
            </div>

            <div class="font-600 text-#1D2129 text-20">
                置业意向
            </div>

            <div class="p-30 pl-60">
                <ElRow :gutter="20">
                    <el-col :span="8">
                        <div>意向楼盘：{{ data?.intentionBuilding }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>意向户型：{{ data?.intentionHouseType }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>意向房源：{{ data?.intentionHouse }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>首选意向面积：{{ data?.intentionArea }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>预算：{{ data?.budget }}</div>
                    </el-col>

                    <el-col :span="8" />

                    <el-col :span="8">
                        <div>置业顾问：{{ data?.propertyConsultant }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>渠道：{{ data?.sourceChannel }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>置业次数：{{ data?.zycs }}</div>
                    </el-col>

                    <el-col :span="24">
                        <div>备注： {{ data?.bz }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>客户名称：{{ data?.customerName }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>手机号：{{ data?.phone }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>身份证：{{ data?.sfz }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>性别：{{ data?.sex }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>年龄段：{{ data?.age }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>居住地址：{{ data?.jzdz }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>工作区域：{{ data?.gzdz }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>婚宴状况：{{ data?.hyzk }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>家庭结构：{{ data?.jtjg }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>所属行业：{{ data?.sszk }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>单价需求：{{ data?.djxq }}</div>
                    </el-col>

                    <el-col :span="8">
                        <div>购房用途：{{ data?.gfyt }}</div>
                    </el-col>

                    <el-col :span="12">
                        <div>预约时间：{{ data?.appointmentTime }}</div>
                    </el-col>
                </ElRow>
            </div>
        </div>
    </ElCard>
</template>

<style scoped>
.el-col {
    margin-bottom: 28px;
    font-size: 16px;
    color: #1d2129;
}
</style>
